<template>
  <div class="raid-item">
    <div class="raid-image" :style="{ backgroundImage: `url(${raid.image})` }">
      <h3 class="raid-name">{{ raid.name }}</h3>
    </div>
    <div class="characters">
      <div v-for="char in characters" :key="char" class="character">
        <div class="character-row" @click="handleCharacterClick(char)">
          <el-checkbox 
            :model-value="getCharStatus(char.name)"
            @change="(val) => handleCheckChange(char, val)"
            :class="{ 'completed': getCharStatus(char.name) }"
          >
            {{ char.name }}
          </el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const props = defineProps({
  raid: {
    type: Object,
    required: true
  },
  characters: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['check-change'])

// 从父组件注入raidStatus
const raidStatus = inject('raidStatus')

const getCharStatus = (charName) => {
  return raidStatus.value[props.raid.id]?.[charName] || false
}

const handleCheckChange = (char, completed) => {
  emit('check-change', { 
    raidId: props.raid.id,
    charName: char.name,
    completed
  })
}

const handleCharacterClick = (char) => {
  const currentStatus = getCharStatus(char.name)
  handleCheckChange(char, !currentStatus)
}
</script>

<style scoped>
.raid-item {
  border: 2px solid #8B4513;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.raid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}

.raid-image {
  height: 94px;
  width: 204px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.raid-name {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  color: #FFD700;
  text-shadow: 2px 2px 4px black;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}

.characters {
  padding: 12px;
  background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
}

.character {
  margin: 6px 0;
}

.character-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.character-row:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

:deep(.el-checkbox) {
  color: #e6e6e6;
  font-size: 14px;
  width: 100%;
}

:deep(.el-checkbox.completed) {
  opacity: 0.6;
}

:deep(.el-checkbox.completed .el-checkbox__label) {
  text-decoration: line-through;
  color: #888;
}
</style>
